<template>
	<view class="water-card-wrap gradient-wrap flex-wrap">
		<view class="flex-1 mr-16">
			<waterfall-card class="water-item" v-for="(item, index) in leftList" :key="index" :itemData="item" />
		</view>
		<view class="flex-1">
			<waterfall-card
				class="water-item"
				v-for="(rightItem, index) in rightList"
				:key="index"
				:itemData="rightItem"
			/>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import WaterfallCard from "./waterfull-card.vue"

const props = defineProps({
	listData: {
		type: Array,
		default: [],
	},
})

const allData = ref<any>([])
const leftList = ref<any>([])
const rightList = ref<any>([])

onMounted(() => {
	allData.value = props.listData
	allData.value.forEach((item: any, index: number) => {
		if (index % 2 === 0) {
			leftList.value.push(item)
		} else {
			rightList.value.push(item)
		}
	})
	console.log(leftList, "leftList")
	console.log(rightList, "rightList")
})
</script>
<style lang="scss" scoped>
.water-item {
	width: 100%;
	border-radius: 16rpx;
	background: #fff;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	display: flex;
	flex-direction: column;
}
</style>
